<template>
  <div class="platformdata-box">
    <div class="platformdata-title">
      <span class="title-span">车辆数量大揭秘</span>
    </div>
    <div class="platformdata-content">
     <pieOne
      :summaryInfo="summaryInfo"
      :colorList="colorList"
      :mapDetail="mapDetail"
      type="1"
      ref="stockPie"
     ></pieOne>
    </div>
  </div>
</template>

<script>
import pieOne from './pieOne'
export default {
  name:'Task',
  components: {
    pieOne,
  },
  props: {
    chinaMapIn: {
      type: Array,
      default: () => {
        return []
      }
    },
    mapDetail: {
      type: Object,
      default: () => {
        return {
          projectCompletedPercent: 0,//项目已完成百分比,
          projectDoPercent: 0,//项目进行中百分比,
          projectExtendedPercent: 0,//项目已延期百分比,
        }
      }
    }
  },
  watch: {
    chinaMapIn: {
      handler() {
      },
      immediate: true,
      deep: true
    },
    mapDetail: {
      handler() {
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      chart: null,
      detail: '',
      colorList :[
        ['rgba(7,165,255,0.20)', '#36B2FF', '#36B2FF'],
        ['rgba(170,85,255,0.20)', '#00DD9C', '#00DD9C'],
        ['rgba(185,231,50,0.20)', '#EC8452', '#EC8452'],
      ],
      summaryInfo:{}
    }
  },
  mounted(){
   
   this.summaryInfo={
            tooltip: {              
              show: false,
            },
           
            series: [
              {
                type: 'pie',
                radius: ['50%', '60%'],
                center: ['50%', '50%'],
                label: {
                  show: false,
                  position: 'center',
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 12,
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: [
                  { value: this.mapDetail.projectDoPercent, name: '进行中' },
                  { value: this.mapDetail.projectCompletedPercent, name: '已完成' },
                  { value: this.mapDetail.projectExtendedPercent, name: '已延误' },
                ]
              }
            ]
          }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.platformdata-box {
  position: relative;
  width: 100%;
  height: calc(100%);
  color: #CCDCFF;
  .platformdata-title {
    position: relative;
    width: 100%;
    height: 20px;
    margin-top: 10px;
    background-image: url("../../../../assets/screen/biaoti.jpg");
    background-size: 100% 100%;
    .title-span{
      position: relative;
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #CCDCFF;
      left: 5%;
      top:-10px;
    }
  }
  .platformdata-content{
    margin-top: 5px;
    width: 100%;
    height: calc(100% - 40px);
    background-image: url("../../../../assets/screen/chart.jpg");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    .content-biaoti{
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 5px;
    }
    .biaoti-label{
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
    }
    .content-count{
      font-size: 30px;
      font-family: DIN;
      font-weight: bold;
    }
  }
}
</style>
